.player-control {
  // background-color: #323131;
  height: 53px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: -45px;
  color: #fff;
  user-select: none;
  transition: 0.5s;
  z-index: 100;

  .bg {
    // background: url('') no-repeat ;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-position: 0 0;
    background-repeat: repeat-x;
    z-index: -1;
  }

  .content {
    height: 100%;
    display: flex;
    position: relative;
  }

  .control-box {
    display: flex;
    height: 100%;
    align-items: center;
    // cursor: pointer;
    width: 120px;
    margin-right: 20px;
    justify-content: space-between;

    & > div {
      font-size: 20px;
      cursor: pointer;
      width: 28px;
      height: 28px;
    }

    .left {
      background-position: 0 -130px;

      &:hover,
      &:active {
        background-position: -30px -130px;
      }
    }

    .right {
      background-position: -80px -130px;

      &:hover,
      &:active {
        background-position: -110px -130px;
      }
    }

    .center {
      font-size: 24px;
      width: 36px;
      height: 36px;

      background-position: 0 -204px;

      &:hover,
      &:active {
        background-position: -40px -204px;
      }
    }

    .center.pause {
      background-position: 0 -165px;

      &:hover,
      &:active {
        background-position: -40px -165px;
      }
    }
  }

  .music-box {
    width: 650px;
    height: 100%;
    display: flex;
    align-items: center;

    .music-img {
      width: 34px;
      height: 34px;

      img {
        border-radius: 4px;
        width: 100%;
        height: 100%;
      }
    }

    .muisc-desc {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 20px;
      height: 34px;
      // width: calc(100% - 54px);
      width: 494px;
    }

    .music-name {
      span {
        margin-left: 10px;
        font-size: 12px;
        color: #9b9b9b;
      }
    }

    .progrss-bar {
      // background-color: green;
      height: 9px;
      border-radius: 4.5px;
      position: relative;

      .bar-item {
        position: absolute;
        left: 0;
        height: 100%;
        // width: 100%;
        top: 0;
        background: url('//s2.music.126.net/style/web2/img/frame/statbar.png?de1a88cd3ed9616213978f7e497adba0')
          no-repeat 0 9999px;
        z-index: 1;
        border-radius: 4.5px;
      }

      .bar-1 {
        background-position-y: 0px;
        z-index: 10;
        right: 0px;
      }

      .bar-2 {
        background-position-y: -30px;
        z-index: 11;
        // width: 70%;
        right: 200px;
      }

      .bar-3 {
        background-position-y: -66px;
        z-index: 13;
        right: 200px;
        // width: 100%;
      }

      .circle-bar {
        cursor: pointer;
        width: 24px;
        height: 22px;
        position: absolute;
        right: -10px;
        top: 50%;
        transform: translateY(-50%);
        background: url('//s2.music.126.net/style/web2/img/ie6/ply_btn.png?e3dbf114eceff9558b73953fdb01c8e9')
          no-repeat 0 0;

        &:hover {
          background: url('https://s2.music.126.net/style/web2/img/ie6/ply_btn_hvr.png?44e61f4fc377810f3277c9d27469c867')
            no-repeat 0 0;
        }
      }
    }

    .muisc-time-box {
      height: 100%;
      align-items: flex-end;
      display: flex;
      margin-left: 10px;
      padding-bottom: 4px;
      font-size: 12px;
      letter-spacing: 1px;
      color: #a1a1a1;

      span:nth-child(2) {
        color: #797979;
      }
    }
  }
}

.warp-lock {
  bottom: 0;
}

.warp-unlock {
  bottom: -45px;

  &:hover {
    bottom: 0;
  }
}

// 收藏区
.collect-box {
  margin-top: 10px;
  width: 60px;
  display: flex;
  height: 36px;
  padding-top: 8px;
  justify-content: space-between;

  & > div {
    flex: 1;
    cursor: pointer;
    width: 25px;
    height: 25px;
  }

  .collect-bar {
    background-position: -88px -163px;

    &:hover {
      background-position: -88px -189px;
    }
  }

  .share-bar {
    background-position: -114px -163px;

    &:hover {
      background-position: -114px -189px;
    }
  }
}

.volume-warp {
  width: 126px;
  display: flex;
  align-items: center;
  padding-top: 10px;
  justify-content: space-between;
  position: relative;

  & > div {
    cursor: pointer;
  }

  .volume-bar {
    width: 25px;
    height: 25px;
    background-position: -2px -248px;

    &:hover {
      background-position: -31px -248px;
    }
  }

  .schema-bar {
    width: 25px;
    height: 25px;
    background-position: -3px -344px;

    &:hover {
      background-position: -33px -344px;
    }
  }

  .schema-bar.once-bar {
    background-position: -66px -344px;

    &:hover {
      background-position: -93px -344px;
    }
  }

  .schema-bar.random-bar {
    background-position: -66px -248px;

    &:hover {
      background-position: -93px -248px;
    }
  }

  .menu-bar {
    width: 59px;
    height: 25px;
    background-position: -42px -68px;
    padding-left: 20px;
    text-align: center;
    line-height: 25px;
    color: #4a4a4a;

    &:hover {
      background-position: -42px -98px;
    }
  }
}

.bg-bar {
  background: url('~@/assets/img/playbar.png') no-repeat 0 9999px;
}

.volume-setbar {
  position: absolute;
  // top: -113px;
  // left: 9px;
  width: 32px;
  height: 113px;
  left: -4px;
  top: -107px;
  transition: 3s;

  .bg {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
    background-position: 0 -503px;
  }

  .prop-bar {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 93px;
    background-position: -40px bottom;

    // padding: 4px 0;
    // margin    : 10px auto;
    .volume-circle {
      position: absolute;
      width: 18px;
      height: 20px;
      left: -7px;
      top: -7px;
      background: url('https://s2.music.126.net/style/web2/img/ie6/vol_btn.png?e322f100cc177aa0ce2e189bbbd27d0b')
        no-repeat;

      // background-position: -40px -250px;
      &:hover {
        background: url('https://s2.music.126.net/style/web2/img/ie6/vol_btn_hvr.png?bee5e08dcf14f19b3507aba37bc45328')
          no-repeat;
      }
    }
  }
}

.lock-warp {
  position: absolute;
  top: -15px;
  right: 15px;
  width: 52px;
  height: 23px;
  background-position: 0 -380px;
  z-index: 1;
  cursor: pointer;
  // cursor: ;
}

.locked {
  .lock-bar {
    background-position: -100px -380px;
  }

  &:hover .lock-bar {
    background-position: -100px -400px;
  }
}

.unlock {
  .lock-bar {
    background-position: -80px -380px;
  }

  &:hover .lock-bar {
    background-position: -80px -400px;
  }
}

// 锁
.lock-bar {
  width: 18px;
  height: 18px;

  position: absolute;

  top: 5px;
  left: 50%;
  transform: translateX(-50%);
}

.play-list {
  position: absolute;
  left: 0;
  right: 0;
  background-color: #191919;
  height: 300px;
  top: -294px;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
  color: #e2e2e2;

  .close-bar {
    position: absolute;
    right: 5px;
    top: 5px;
    color: #ccc;
    font-size: 12px;
  }

  .warp {
    display: flex;
    height: 100%;
  }

  .list-box {
    width: 558px;

    .head {
      display: flex;
      justify-content: space-between;

      div {
        &:nth-child(2) {
          display: flex;

          div {
            display: flex;
            align-items: center;
            margin-right: 10px;
            cursor: pointer;

            &:hover {
              color: #fff;

              .col-bar {
                background-position: -24px -20px;
              }

              .clear-bar {
                background-position: -51px -20px;
              }
            }

            i {
              display: inline-block;
              width: 16px;
              margin-right: 5px;
              // h16px
              height: 16px;
              background: url('//s2.music.126.net/style/web2/img/frame/playlist.png?744596625dbbad035ce535c8dfe64350')
                no-repeat 0 9999px;
            }

            .col-bar {
              background-position: -24px 0;
            }

            .clear-bar {
              background-position: -51px 0;
            }
          }
        }
      }
    }
  }

  .lyrics {
    width: calc(100% - 558px);
    border-left: 1px solid #666;

    .head {
      text-align: center;
    }

    .lyics-list {
      padding: 10px 20px;
      height: 260px;
      overflow-y: scroll;

      li {
        line-height: 28px;
        text-align: center;
        margin-bottom: 20px;
        min-height: 28px;
        color: #989898;
        transition: 1s;
      }

      li.select {
        color: #ffffff;
      }
    }
  }

  .head {
    height: 40px;
    border-bottom: 1px solid #444;
    line-height: 40px;
    padding: 0 20px;
  }

  .not-song {
    height: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #202122;
  }

  .song-list-box {
    height: 260px;
    overflow-y: scroll;
  }

  .paly-song-list {
    height: 260px;

    li {
      height: 28px;
      display: flex;
      line-height: 28px;
      cursor: pointer;

      &:hover {
        background-color: #000;

        .handleList i {
          display: block;
        }
      }

      .song-name {
        width: calc(100% - 100px - 20px - 100px);
      }

      .arrow {
        width: 20px;
        padding-left: 5px;

        i {
          display: block;
          background: url('//s2.music.126.net/style/web2/img/frame/playlist.png?744596625dbbad035ce535c8dfe64350')
            no-repeat 0 9999px;
          background-position: -182px 0;
          height: 10px;
          width: 13px;
          margin-top: 9px;
        }
      }

      .singer-name {
        width: 100px;
      }

      .handleList {
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 6px;

        i {
          width: 15px;
          height: 16px;
          display: block;
          background: url('//s2.music.126.net/style/web2/img/frame/playlist.png?744596625dbbad035ce535c8dfe64350')
            no-repeat 0 9999px;
          display: none;
        }

        .icon-1 {
          background-position: -24px 0;

          &:hover {
            background-position: -24px -20px;
          }
        }

        .icon-2 {
          background-position: 0 0;

          &:hover {
            background-position: 0 -20px;
          }
        }

        .icon-3 {
          background-position: -57px -50px;

          &:hover {
            background-position: -80px -50px;
          }
        }

        .icon-4 {
          background-position: -51px 0;

          &:hover {
            background-position: -51px -20px;
          }
        }
      }
    }
  }
}

.scroll::-webkit-scrollbar {
  width: 5px;
  height: 1px;
}

.scroll::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: none;
  background: #222;
  -webkit-box-shadow: none;
}

.scroll::-webkit-scrollbar-track {
  -webkit-box-shadow: none;
  border-radius: 5px;
  background: #444;
  -webkit-box-shadow: none;
}

@media (max-width: 900px) {
  .player-control {
    // display: none;
    .music-box {
      width: calc(100% - 80px - 130px);
      .muisc-desc {
        // width: 150px;
        width: calc(100% - 54px);
        max-width: 494px;
      }
      .music-img {
        img {
          border-radius: 50%;
        }
      }
      .muisc-time-box {
        display: none;
      }
      .progrss-bar {
        display: none;
      }
      .music-name {
        // display: ;
        // margin-top: 10px;
        font-size: 12px;
        span {
          display: block;
          margin-left: 0;
        }
      }
    }
    .collect-box,
    .volume-bar {
      display: none;
    }
    // .music-name{}
    .control-box {
      // margin-right: 10px;
      padding: 0 10px;
      width: 130px;
      margin-right: 0;
      .left {
        // display: none;
      }
      .right {
        // display: none;
      }
    }
    .volume-warp {
      width: 70px;
      margin-right: 10px;
      padding: 0 10px;
    }
    .menu-bar {
      // display: ;
      width: 23px;
      span {
        display: none;
      }
    }
  }
}
